<template>
  <div>
    <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="80px" :disabled="disabled">
      <el-form-item label="位置" prop="user_address">
        <el-cascader ref="cascader" v-model="formData.user_address" :options="addressList" :props="defaultProps" clearable @change="changeSelect" :change-on-select="true" style="width: 100%"></el-cascader>
      </el-form-item>
      <el-form-item label="详细位置" prop="remark">
        <el-input v-model="formData.detail_address"></el-input>
      </el-form-item>
      <el-form-item label="维修类别" prop="fix_category">
        <select-tree :list="categoryList" style="width: 100%" v-model="formData.fix_category" size="small" :disabled="disabled"></select-tree>
      </el-form-item>
      <el-form-item label="问题描述" prop="remark">
        <el-input type="textarea" v-model="formData.remark" :autosize="{minRows:3,maxRows:6}"></el-input>
      </el-form-item>
      <el-row :gutter="24" >
        <el-col :span="12">
          <el-form-item label="预约时间" prop="appt_time">
            <el-date-picker
              v-model="formData.appt_time"
              align="right"
              value-format="yyyy-MM-dd HH:mm"
              type="datetime"
              style="width: 100%"
              placeholder="预约时间">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="处理时间" v-if="formData.receive_time">
            <el-date-picker
              v-model="formData.receive_time"
              align="right"
              value-format="yyyy-MM-dd HH:mm"
              type="datetime"
              style="width: 100%"
              placeholder="处理时间">
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24" >
        <el-col :span="12">
          <el-form-item label="用户名" prop="username">
            <el-input v-model="formData.username" :disabled="true"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="手机号" prop="mobile">
            <el-input v-model="formData.mobile"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="上传附件" prop="files">
        <my-upload-file v-model="formData.files" :disabled="disabled"></my-upload-file>
      </el-form-item>

    </el-form>
    <div class="goodsInfo">
      <el-table
        class="goodList"
        :data="formData.goods_info"
        v-if="formData.goods_info&&formData.goods_info.length>0 "
        style="width: 100%">
        <el-table-column
          prop="good_name"
          label="物料名称">
        </el-table-column>
        <el-table-column
          prop="count"
          label="物料数量"
          width="90px">
        </el-table-column>
      </el-table>
    </div>
    <recode-dialog v-if="isRecode" :id = "row.id"></recode-dialog>


  </div>
</template>
<script>
import address from "@/api/onlineRepair/address/index";
import category from "@/api/onlineRepair/category/index"
import XEUtils from "xe-utils";
import SelectTree from "@/components/Common/SelectTree";
import MyUploadFile from "../../../components/Common/MyUploadFile";
import RecodeDialog from "./components/recodeDialog";
export default {
  name:"DetailForm",
  components: {RecodeDialog, MyUploadFile, SelectTree},
  props: ["row","disabled"],
  data() {
    return {
      defaultProps: {
        value: "id",
        children: "children",
        label: "name",
        checkStrictly: true
      },
      formData: {
        address:undefined,
        user_address:undefined,
        fix_category:undefined,
        remark:undefined,
        files:undefined,
        username:localStorage.getItem("alias"),
        mobile:localStorage.getItem("phone"),
        start_time:undefined
      },
      rules: {
        fix_category: [{
          required: true,
          message: '请输入选择类别',
          trigger: 'blur'
        }],
        mobile: [{
          required: true,
          message: '请输入正确的联系电话',
          pattern:/((\d{11})|^((\d{7,8})|(\d{4}|\d{3})-(\d{7,8})|(\d{4}|\d{3})-(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1})|(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1}))$)$/,
          trigger: 'blur'
        }],
        start_time:[
          {
            required: true,
            message: '请输入选择时间',
            trigger: 'blur'
          }
        ],
        remark:[
          {
            required: true,
            message: '请输入问题描述',
            trigger: 'blur'
          }
        ],
        user_address:[
          {
            required: true,
            message: '请选择位置',
            trigger: 'blur'
          }
        ],
        appt_time:[
          {
            required: true,
            message: '请输入预约时间',
            trigger: 'blur'
          }
        ]
      },
      addressList:[],
      categoryList:[],
    }
  },
  computed: {
    isRecode(){
      return this.row.ticket_info?this.row.ticket_info.act_state_id == 4:false
    }
  },
  watch: {

  },
  created() {
    if(this.row.id)this.formData = {...this.row}
    this.getAddressList()
    this.getCategoryList()

  },
  mounted() {},
  methods: {
    changeSelect(node){
      this.formData.user_address = node[node.length-1]
    },
    getAddressList(){
      address.getList().then(res=>{
        this.addressList = XEUtils.toArrayTree(res.data,{strict: true, parentKey: 'parent', key: 'id', children: 'children'})
      })
    },
    getCategoryList(){
      category.getList().then(res=>{
        this.categoryList = XEUtils.toArrayTree(res.data,{strict: true, parentKey: 'parent', key: 'id', children: 'children'});
      })
    },
    submitForm() {
      let self = this
      return new Promise(function(resolve, reject) {
        self.$refs['elForm'].validate(valid => {
          if (!valid) return
          // TODO 提交表单
          console.log("self.formData",self.formData)
          resolve({...self.formData,is_web:1})
        })
      });
    },

  }
}

</script>
<style lang="scss" scoped>
.goodsInfo{
  margin-bottom: 15px;
  margin-top: -10px;
}
.el-upload__tip {
  line-height: 1.2;
}
</style>
